<template>
<div class="user">
    <div class="common-form">{{$t('plus.add_activity_venue')}}</div>
    <div class="product-content">
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px">
        <el-form-item :label="$t('plus.activity_title')" prop="name" :rules="[{  required: true,  message: ' '}]">
          <el-input type="text" v-model="form.name" :placeholder="$t('plus.input_activity_title')" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item :label="$t('plus.background_image')" prop="imageId">
          <el-row>
            <el-button type="primary" @click="openUpload">{{$t('plus.choose_image')}}</el-button>
            <div v-if="form.imageId != ''" class="img">
              <img :src="filePath" width="100" height="100" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item :label="$t('plus.activity_date')" prop="value1" :rules="[{  required: true,  message: ' '}]">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="form.value1" type="datetimerange" value-format="YYYY-MM-DD" :range-separator="$t('plus.to')"
              :start-placeholder="$t('plus.start_date')" :end-placeholder="$t('plus.end_date')">
            </el-date-picker>
          </div>
        </el-form-item>
        <div class="common-form">{{$t('plus.gift_package_setting')}}</div>
        <el-form-item :label="$t('plus.coupon')">
          <el-checkbox v-model="form.isCoupon"> {{$t('plus.coupon_limit_tip')}}</el-checkbox>
        </el-form-item>
        <el-form-item label="" v-if="form.isCoupon">
          <el-button type="primary" @click="addCoupon()">{{$t('plus.add')}}</el-button>
          <el-table :data="tableData" style="width: 60%">
            <el-table-column prop="couponId" :label="$t('plus.coupon_id')">
            </el-table-column>
            <el-table-column prop="name" :label="$t('plus.coupon')">
            </el-table-column>
            <el-table-column prop="couponNum" :label="$t('plus.quantity')" :rules="[{  required: true,  message: ' '}]">
              <template  #default="scope">
                <el-input type="number" v-model="scope.row.couponNum" placeholder="" min="1" max='10' @blur="max10"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" :label="$t('plus.action')">
              <template  #default="scope">
                <el-button type="text" size="small" @click="delcoupon(scope.row)"> {{$t('plus.delete')}} </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item :label="$t('plus.gift_product')">
          <el-checkbox v-model="form.isProduct">{{$t('plus.single_spec_only')}}</el-checkbox>
        </el-form-item>
        <el-form-item v-if="form.isProduct" :label="$t('plus.purchase_quantity')" prop="productNum" :rules="[{  required: true,  message: ' '}]">
          <el-input type="number" v-model="form.productNum" :placeholder="$t('plus.input_purchase_quantity')" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="" v-if="form.isProduct">
          <el-button type="primary" @click="addProduct()">{{$t('plus.add')}}</el-button>
          <el-table :data="prodcutData" style="width: 40%">
            <el-table-column prop="productName" :label="$t('plus.gift_product')">
            </el-table-column>
            <el-table-column prop="product_" :label="$t('plus.action')">
              <template  #default="scope">
                <el-button type="text" size="small" @click="delProduct(scope.row)"> {{$t('plus.delete')}} </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item :label="$t('plus.gift_point')">
          <el-checkbox v-model="form.isPoint"> {{$t('plus.points_unlimited_tip')}}</el-checkbox>
        </el-form-item>
        <el-form-item :label="$t('plus.points_quantity')" v-if="form.isPoint">
          <el-input type="number" v-model="form.point" class="max-w460">
            <template #append>{{$t('plus.gift_point')}}</template>
          </el-input>
        </el-form-item>
        <div class="common-form">{{$t('plus.purchase_setting')}}</div>
        <el-form-item :label="$t('plus.purchase_amount')" prop="money" :rules="[{  required: true,  message: ' '}]">
          <el-input type="number" v-model="form.money" class="max-w460">
            <template #append>{{$t('plus.unit_yuan')}}</template>
          </el-input>
        </el-form-item>

        <el-form-item :label="$t('plus.member_level_required')">
          <el-radio-group v-model="form.isGrade">
            <el-radio :label="0">{{$t('plus.unlimited')}}</el-radio>
            <el-radio :label="1">{{$t('plus.specific_level')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('plus.member_level')" v-if="form.isGrade">
          <el-select v-model="form.gradeIds" multiple :placeholder="$t('plus.please_select')">
            <el-option v-for="(item, index) in Grade" :key="index" :label="item.name" :value="item.gradeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('plus.purchase_times')">
          <el-radio-group v-model="form.isTimes">
            <el-radio :label="0">{{$t('plus.unlimited')}}</el-radio>
            <el-radio :label="1">{{$t('plus.purchase_limit')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="form.isTimes">
          <el-input type="number" v-model="form.times" class="max-w460">
            <template #prepend>{{$t('plus.per_user_limit')}}</template>
            <template #append>{{$t('plus.times')}}</template>
          </el-input>
        </el-form-item>
        <div class="common-form">{{$t('plus.issue_setting')}}</div>
        <el-form-item :label="$t('plus.issue_quantity')" prop="totalNum" :rules="[{  required: true,  message: ' '}]">
          <el-input type="number" v-model="form.totalNum" :placeholder="$t('plus.input_issue_quantity')" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item :label="$t('plus.qr_code')" prop="codeType" :rules="[{  required: true,  message: ' '}]">
          <el-radio-group v-model="form.codeType">
            <el-radio :label="10">{{$t('plus.qr_type_batch')}}</el-radio>
            <el-radio :label="20">{{$t('plus.qr_type_unique')}}</el-radio>
          </el-radio-group>
          <div class="gray9">{{$t('plus.qr_code_tip')}}</div>
        </el-form-item>
      </el-form>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="info" @click="gotoBack">{{$t('plus.back')}}</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">{{$t('plus.submit')}}</el-button>
      </div>
    </div>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">{{$t('plus.upload_image_button')}}</Upload>
    <!--选择优惠券-->
    <GetCoupon v-if="open_add" :open_add="open_add" @closeDialog="closeProductDialogFunc($event)">{{$t('plus.select_coupon_popup')}}</GetCoupon>
    <!--选择商品-->
    <Product :isProduct="isProduct" :excludeIds="excludeIds" :islist="false" @closeDialog="closeProductFunc"></Product>
  </div>
</template>

<script>
import UserApi from '@/api/user.js';
import PackageApi from '@/api/package.js';
import GetCoupon from '@/components/coupon/GetCoupon.vue';
import Product from '@/components/product/Product.vue';
import Upload from '@/components/file/Upload.vue';
export default {
  components: {
    /*选择优惠券件*/
    GetCoupon,
    Product,
    Upload
  },
  data() {
    return {
      form: {
        isCoupon: false,
        isProduct: false,
        coupon: [],
        product: [],
        couponNum: 1,
        isPoint: false,
        point: 0,
        isTimes: 0,
        times: 0,
        isGrade: 0,
        gradeIds: [],
        value1: [],
        name: '',
        productName: '',
        totalNum: '',
        imageId: '',
        productNum: '',
        codeType: 10
      },
      /*等级*/
      Grade: {},
      /*优惠券*/
      tableData: [],
      prodcutData: [],
      loading: false,
      open_add: false,
      /*是否打开选择商品*/
      isProduct: false,
      excludeIds: [],
      /*是否打开图片选择*/
      isupload: false,
      formRules: {
        imageId: [{
          required: true,
          message: $t("plus.upload_bg"),
          trigger: 'blur'
        }]
      },
      /*左边长度*/
      formLabelWidth: '120px'
    };
  },
  created() {
    /*获取等级*/
    this.getGradeList();
  },
  methods: {
    /*获取等级*/
    getGradeList() {
      let self = this;
      let Params = {};
      Params.pageIndex = self.curPage;
      Params.listRows = self.pageSize;
      UserApi.gradelist(Params, true).then(res => {
        self.Grade = res.data.records;
      }).catch(error => {});
    },
    /*添加优惠券*/
    addCoupon() {
      this.open_add = true;
    },
    /*添加商品*/
    addProduct() {
      this.isProduct = true;
    },
    /*关闭优惠券*/
    closeProductDialogFunc(e) {
      let self = this;
      self.open_add = e.openDialog;
      console.log(e.params);
      if (e.type == 'success') {
        if (self.form.coupon.length < 1) {
          self.form.coupon.push({
            couponId: e.params.couponId,
            couponNum: e.params.totalNum
          });
          self.tableData.push({
            couponId: e.params.couponId,
            name: e.params.name,
            couponNum: 1
          });
        } else {
          let flag = true;
          self.form.coupon.forEach((item, index) => {
            if (item.couponId == e.params.couponId) {
              flag = false;
            }
          });
          if (flag) {
            self.form.coupon.push({
              couponId: e.params.couponId,
              couponNum: e.params.totalNum
            });
            self.tableData.push({
              couponId: e.params.couponId,
              name: e.params.name,
              couponNum: 1
            });
          } else {
            ElMessage.error($t("plus.do_not_repeat"));
          }
        }
      }
    },
    /*关闭商品*/
    closeProductFunc(e) {
      let self = this;
      self.isProduct = e.openDialog;
      if (e.type == 'success') {
        self.form.product.push(e.params.productId);
        self.prodcutData.push(e.params);
      }
    },
    delProduct(item) {
      let self = this;
      let n = self.prodcutData.indexOf(item);
      self.prodcutData.splice(n, 1);
      self.form.product.splice(n, 1);
    },
    delcoupon(item) {
      let self = this;
      let n = self.tableData.indexOf(item);
      self.tableData.splice(n, 1);
      self.form.coupon.splice(n, 1);
    },
    /*提交表单*/
    onSubmit() {
      let self = this;
      let form = self.form;
      form.coupon = self.tableData;
      //form.coupon = JSON.stringify(form.coupon);
      form.startTime = form.value1[0];
      form.endTime = form.value1[1];
      //form.delete(value1);
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          PackageApi.savePackage(form, true).then(data => {
            self.loading = false;
            if (data.code == 1) {
              ElMessage({
                message: data.msg,
                type: 'success'
              });
              self.$router.push('/plus/package/index');
            } else {
              self.loading = false;
            }
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.filePath = e[0].filePath;
        this.form.imageId = e[0].fileId;
      }
      this.isupload = false;
    },
    /*返回上一页面*/
    gotoBack() {
      this.$router.back(-1);
    },
    max10(e) {
      if (e.target.value >= 10) {
        e.target.value = 10;
      }
    }
  }
};
</script>

